<template>
  <div class="container">
    <div style="display: flex; background: #fff">
      <img
        :src="avter"
        alt=""
        style="
          border-radius: 25px;
          width: 30px;
          height: 30px;
          margin: 10px 5% 0px 5%;
        "
      />
      <p>{{ positionName }}</p>
    </div>
    <div
      class="divp"
      style="
        height: auto;
        width: 100%;
        padding: 0px 5% 5px;
        background: #fff;
        color: #8d8e8eee;
        font-size: 12px;
      "
      v-html="tiw"
    ></div>
    <div
      style="position: relative"
      :style="{
        background: '#199EED',
      }"
    >
      <div class="navclas" style="" v-if="false">
        <div
          class=""
          style="
            border-radius: 27px;
            width: 100%;
            padding: 0 10px;
            height: 29px;
            background: #fff;
          "
        >
          <div
            class="van-field__left-icon"
            style="padding-top: 5px; display: flex"
          >
            <i
              class="van-icon van-icon-search"
              style="
                height: 1.1rem;
                color: #686869;
                padding-top: 1%;
                padding-right: 2px;
              "
            ></i>
            <input
              v-model="filter_name"
              type="search"
              placeholder="输入省市名称如：南京市"
              ref="inpt"
              style="font-size: 14px"
              class="van-field__control"
              @search="filname"
            />
          </div>
        </div>
      </div>

      <!-- 头上 -->

      <div>
        <van-row type="flex" justify="space-around" align="center"> </van-row>
        <van-row
          class="menu-container"
          style="justify-content: space-between; padding: 10px 10px"
        >
          <van-col span="8" style="">
            <van-dropdown-menu
              class="addressVa"
              style=""
              active-color="#EE3F00"
            >
              <van-dropdown-item
                :title="address"
                class="select_area"
                ref="area_item"
              >
                <van-area
                  columns-num="2"
                  :area-list="areaList"
                  @confirm="addConfirm"
                  @cancel="hideAreaItem"
                  :value="area_code"
                />
              </van-dropdown-item>
            </van-dropdown-menu>
          </van-col>
          <van-col span="8" style="border-radius: 25px; margin: 0 10px">
            <van-dropdown-menu
              class="addressVa"
              style="margin: auto"
              active-color="#EE3F00"
            >
              <van-dropdown-item
                v-model="skill"
                :options="workType"
                @change="changeItem"
              />
            </van-dropdown-menu>
          </van-col>
          <!-- <van-col span="8" style="border-radius: 25px; margin: 0 4.5px">
            <van-dropdown-menu
              style="border-radius: 25px; background: #ffae4e"
              active-color="#EE3F00"
            >
            </van-dropdown-menu>
          </van-col> -->
          <van-col
            span="8"
            class="is-active"
            style="
              border-radius: 25px;
              display: flex;
              justify-content: center;
              align-items: center;
            "
            @click="publish('/info/project-publish/-1')"
          >
            <span style="font-size: 15px; color: white; padding-bottom: 2.8px"
              >点击发布</span
            >
          </van-col>
        </van-row>
      </div>
    </div>
    <!-- 分隔 -->
    <div
      style="width: 100%; height: 8px; background: #ebebeb"
      v-if="controltab"
    ></div>

    <!-- tab卡 -->
    <div
      style="width: 94%; margin: auto; padding-top: 6px"
      v-if="controltab"
      ref="tabdiv"
    >
      <ul style="width: 100%; float: left; flex-wrap: wrap" ref="tabul">
        <li
          v-for="(vlu, index) in tabvlue"
          :key="vlu.id"
          style="width: 20%; float: left; border-radius: 4px; margin-top: 0px"
          :style="index % 4 != 0 ? 'margin-left: 0%' : null"
          :class="vlu.id == active ? 'getback' : 'pubak'"
          @click="ontap(index, vlu.id)"
        >
          <p style="width: 100%; text-align: center">
            <img v-lazy="vlu.img" alt="" style="width: 2rem" />
            <br />
            <span
              style="
                padding: 0px 2px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                width: 100%;
              "
              class="tanspan"
              >{{ vlu.tab }}</span
            >
          </p>
        </li>
      </ul>
    </div>
    <div style="width: 100%; background: #fff; height: 20px" v-if="controltab">
      <p style="background: #ededed; height: 8px"></p>
    </div>
    <div style="">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="看看其他地区的工程招工信息"
        @load="onLoad"
      >
        <div v-for="(item, index) in list" :key="index" :title="item">
          <van-row
            style="padding-top: 15px"
            @click="itemClick(`/info/project-detail/${item.id}`)"
          >
            <van-col style="position: relative">
              <img
                :src="getSrc(item, index)"
                style="object-fit: cover; border-radius: 4px"
                height="100px"
                width="100px"
              />
              <img
                v-if="item.finished"
                src="@/assets/images/finish.png"
                style="
                  position: absolute;
                  z-index: 1;
                  width: 100%;
                  left: 50%;
                  top: 50%;
                  margin: auto;
                  transform: translate(-50%, -50%);
                "
              />
            </van-col>
            <van-col
              style="
                width: calc(100% - 100px);
                height: 100px;
                padding-left: 10px;
                display: flex;
                flex-direction: column;
              "
            >
              <div
                style="flex: 1; display: flex"
                :class="item.choiceness ? 'fincell' : null"
              >
                <p
                  v-if="item.choiceness"
                  style="
                    display: inline-block;
                    display: flex;
                    color: white;
                    width: auto;
                    height: 20px;
                    padding: 2px 3px;
                    font-size: 11px;
                    align-items: center;
                    text-align: center;
                    border-radius: 4px;
                    margin-top: 5px;
                  "
                  :style="{
                    background: item.choiceness == false ? null : '#86d1a4',
                  }"
                >
                  {{ item.choiceness == false ? null : '精选' }}
                </p>

                <van-cell
                  :title="item.title"
                  label-class="item"
                  title-class="title"
                ></van-cell>
              </div>
              <div class="van-cell__label item" style="">
                {{ item.detail }}
              </div>
              <div class="cell-div" style="flex: 1">
                <van-row type="flex" align="center" style="margin-top: 5px">
                  <van-col>
                    <van-tag
                      text-color="#fff"
                      size="large"
                      class="tag-blue"
                      v-if="item.workType.length > 0"
                      >{{ getHasWkType(item.workType[0]) }}</van-tag
                    >
                    <van-tag
                      text-color="#fff"
                      size="large"
                      class="tag-blue"
                      style="margin-left: 3px"
                      v-if="item.workType.length > 1"
                      >{{ getHasWkType(item.workType[1]) }}</van-tag
                    >
                  </van-col>
                </van-row>
                <van-row
                  type="flex"
                  align="bottom"
                  justify="space-between"
                  style="margin-top: 5px; margin-left: 1px"
                >
                  <van-col style="display: flex; align-items: center">
                    <slot
                      v-if="item.city && item.city.length > 6"
                      style="display: flex"
                    >
                      <van-icon name="location-o" color="#969799" />
                      <span class="cell-span" style="margin-left: 3px">{{
                        item.city.substring(0, 6) + '...'
                      }}</span>
                    </slot>
                    <slot v-else style="display: flex">
                      <van-icon name="location-o" color="#969799" />
                      <span
                        class="cell-span"
                        style="
                          margin-left: 3px;
                          display: inline-block;
                          width: 2.6rem;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          white-space: nowrap;
                        "
                        >{{ item.city || '地区未知' }}</span
                      >
                    </slot>
                  </van-col>
                  <van-col>
                    <span
                      style="color: #969799; margin-right: 3px; font-size: 12px"
                      >{{ item.staff }}</span
                    >
                    <span class="cell-span">人</span>
                  </van-col>
                  <van-col>
                    <span class="cell-span" style="color: #ff1800">{{
                      item.updateTime.substring(0, 10)
                    }}</span>
                  </van-col>
                </van-row>
              </div>
            </van-col>
          </van-row>
          <van-divider
            :style="{
              color: 'rgba(187, 187, 187, 0.38)',
              borderColor: 'rgba(187, 187, 187, 0.38)',
              padding: '15px 16px 0px 16px',
            }"
          ></van-divider>
        </div>
      </van-list>
    </div>
    <div>
      <div
        style="
          width: 100%;
          text-align: center;
          font-size: 18px;
          font-weight: 600;
        "
      >
        更多推荐
      </div>
      <div style="width: 90%; margin: auto; padding-top: 10px">
        <img :src="ksyh" alt="" style="width: 100%" />
      </div>

      <van-list
        v-model="loading"
        :finished="morefinished"
        finished-text="没有更多了"
        @load="onLoadMore"
      >
        <div v-for="(item, index) in morelist" :key="index" :title="item">
          <van-row
            style="padding-top: 15px"
            @click="itemClick(`/info/project-detail/${item.id}`)"
          >
            <van-col style="position: relative">
              <img
                :src="getSrc(item, index)"
                style="object-fit: cover; border-radius: 4px"
                height="100px"
                width="100px"
              />
              <img
                v-if="item.finished"
                src="@/assets/images/finish.png"
                style="
                  position: absolute;
                  z-index: 1;
                  width: 100%;
                  left: 50%;
                  top: 50%;
                  margin: auto;
                  transform: translate(-50%, -50%);
                "
              />
            </van-col>
            <van-col
              style="
                width: calc(100% - 100px);
                height: 100px;
                padding-left: 10px;
                display: flex;
                flex-direction: column;
              "
            >
              <div
                style="flex: 1; display: flex"
                :class="item.choiceness ? 'fincell' : null"
              >
                <p
                  v-if="item.choiceness"
                  style="
                    display: inline-block;
                    display: flex;
                    color: white;
                    width: auto;
                    height: 20px;
                    padding: 2px 3px;
                    font-size: 11px;
                    align-items: center;
                    text-align: center;
                    border-radius: 4px;
                    margin-top: 5px;
                  "
                  :style="{
                    background: item.choiceness == false ? null : '#86d1a4',
                  }"
                >
                  {{ item.choiceness == false ? null : '精选' }}
                </p>

                <van-cell
                  :title="item.title"
                  label-class="item"
                  title-class="title"
                ></van-cell>
              </div>
              <div class="van-cell__label item" style="">
                {{ item.detail }}
              </div>
              <div class="cell-div">
                <van-row type="flex" align="center" style="margin-top: 5px">
                  <van-col>
                    <van-tag
                      text-color="#fff"
                      size="large"
                      class="tag-blue"
                      v-if="item.workType.length > 0"
                      >{{ getHasWkType(item.workType[0]) }}</van-tag
                    >
                    <van-tag
                      text-color="#fff"
                      size="large"
                      class="tag-blue"
                      style="margin-left: 3px"
                      v-if="item.workType.length > 1"
                      >{{ getHasWkType(item.workType[1]) }}</van-tag
                    >
                  </van-col>
                </van-row>
                <van-row
                  type="flex"
                  align="bottom"
                  justify="space-between"
                  style="margin-top: 5px; margin-left: 1px"
                >
                  <van-col style="display: flex; align-items: center">
                    <slot v-if="item.city && item.city.length > 6">
                      <van-icon name="location-o" color="#969799" />
                      <span class="cell-span" style="margin-left: 3px">{{
                        item.city.substring(0, 6) + '...'
                      }}</span>
                    </slot>
                    <slot v-else>
                      <van-icon name="location-o" color="#969799" />
                      <span
                        class="cell-span"
                        style="
                          margin-left: 3px;
                          display: inline-block;
                          width: 2.6rem;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          white-space: nowrap;
                        "
                        >{{ item.city || '地区未知' }}</span
                      >
                    </slot>
                  </van-col>
                  <van-col>
                    <span
                      style="color: #969799; margin-right: 3px; font-size: 12px"
                      >{{ item.staff }}</span
                    >
                    <span class="cell-span" style="font-size: 12px">人</span>
                  </van-col>
                  <van-col>
                    <span class="cell-span" style="color: #ff1800">{{
                      item.updateTime.substring(0, 10)
                    }}</span>
                  </van-col>
                </van-row>
              </div>
            </van-col>
          </van-row>
          <van-divider
            :style="{
              color: 'rgba(187, 187, 187, 0.38)',
              borderColor: 'rgba(187, 187, 187, 0.38)',
              padding: '15px 16px 0px 16px',
            }"
          ></van-divider>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import {
  Search,
  Row,
  Col,
  DropdownMenu,
  DropdownItem,
  List,
  Uploader,
  Popup,
  Area,
  Tag,
  Icon,
  Divider,
  Toast,
} from 'vant';
import {
  listProject,
  dicItems,
  authInfo,
  adList,
  tishiP,
  morelistProject,
} from '@/api/api';
import contracting from '@/assets/images/contracting.png';
import areaList from '@/views/user/module-address-edit/area_all.json';
import logo_default from '@/assets/images/logo.jpg';
import anticorrosive from '@/assets/images/protab/anticorrosive.png';
import cement from '@/assets/images/protab/cement.png';
import coating from '@/assets/images/protab/coating.png';
import fireproof from '@/assets/images/protab/fireproof.png';
import floor from '@/assets/images/protab/floor.png';
import gypsum from '@/assets/images/protab/gypsum.png';
import lacquer from '@/assets/images/protab/lacquer.png';
import puttyzi from '@/assets/images/protab/puttyzi.png';
import scribing from '@/assets/images/protab/scribing.png';
import waterproof from '@/assets/images/protab/waterproof.png';
import types_of_work from '@/assets/images/protab/types_of_work.png';

import { setLocalStorage, getLocalStorage } from '@/utils/local-storage';
import scrollFixed from '@/mixin/scroll-fixed';

export default {
  mixins: [scrollFixed],
  data() {
    return {
      userId: -1,
      contracting,
      workbol: true,
      tiw: '',
      tabvlue: [
        { tab: '腻子施工', value: '建筑内外墙施工', id: 0, img: puttyzi },
        { tab: '涂料施工', value: '钢结构建筑工地', id: 2, img: coating },
        {
          tab: '防水施工',
          value: '建筑内外墙施工',
          id: 5,
          img: waterproof,
        },
        { tab: '真石漆施工', value: '建筑内外墙施工', id: 7, img: lacquer },
        { tab: '粉刷石膏', value: '建筑内外墙施工', id: 14, img: gypsum },
        { tab: '水泥砂浆', value: '家装工程防水补漏', id: 1, img: cement },
        {
          tab: '防火施工',
          value: '防腐保温工程施工',
          id: 3,
          img: fireproof,
        },
        {
          tab: '防腐施工',
          value: '建筑内外墙施工',
          id: 4,
          img: anticorrosive,
        },
        { tab: '划线施工', value: '建筑内外墙施工', id: 8, img: scribing },
        { tab: '地坪施工', value: '建筑内外墙施工', id: 12, img: floor },
        // {
        //   tab: '其他工种',
        //   value: '建筑内外墙施工',
        //   id: 13,
        //   img: types_of_work,
        // },
      ],
      ksyh: '',
      bei: [],
      areaList: areaList,
      address: '地区选择',
      list: [],
      morelist: [],
      loading: false,
      finished: false,
      morefinished: false,
      logo_default: logo_default,
      page: 0,
      morepage: 0,
      limit: 10,
      sale: false,
      filter_name: '',
      area_code: '',
      skill: '',
      active: 0,
      staff: -1,
      memberLevel: '',
      fight: '',
      controltab: false,
      workType: [],
      option3: [
        {
          text: '人员构成',
          value: -1,
        },
        {
          text: '<20',
          value: 0,
        },
        {
          text: '20-50',
          value: 1,
        },
        {
          text: '>50',
          value: 2,
        },
      ],
      status: ['已下架', '待审核', '审核不通过', '已上线'],
      wkTypeId: 'INFO.WORK.TYPE',
      mobile: '',
      avter: '',
      positionName: '',
      statusy: '',
    };
  },

  created() {
    console.log(this.controltab, 3);
    setTimeout(() => {
      let tandiv = this.$refs.tabdiv;
      let tabul = this.$refs.tabul;
      tandiv.style.height = tabul.offsetHeight + 'px';
    }, 260);
    authInfo().then((res) => {
      this.userId = res.data.data.userId;
      this.mobile = res.data.data.mobile;
      this.statusy = res.data.data.status;
      this.positionName = res.data.data.positionName;
      this.memberLevel = res.data.data.memberLevel;
      this.avter = res.data.data.avatar;
      this.userLevel = res.data.data.userLevel;
      if (this.userLevel < 2) {
        if (this.memberLevel == 1) {
          this.positionName = '金牌会员';
        } else if (this.memberLevel == 2) {
          this.positionName = '普通会员';
        } else if (this.memberLevel == 0 && this.userLevel == 0) {
          this.positionName = '新用户';
        }
      }
    });
    this.initArea();
    this.initWkType();
    adList({ position: 6 }).then((res) => {
      this.ksyh = res.data.data.list[0].url;
    });
    tishiP({ code: 'litemall_project_title' }).then((res) => {
      this.tiw = res.data.data.litemall_project_title;
    });
    if (this.$route.query.index == undefined) {
      this.controltab = true;
    }
    if (getLocalStorage('getskill').getskill != undefined) {
      this.skill = Number(getLocalStorage('getskill').getskill);
      this.active = this.skill;
      if (this.active >= 7 && this.active <= 8) {
        this.active = this.active - 1;
      }
      if (this.active >= 12) {
        this.active = this.active - 4;
      }
      return;
    } else if (this.$route.query.skill != undefined) {
      this.skill = Number(this.$route.query.skill);
      this.active = this.skill;
      // if (this.active >= 7 && this.active <= 8) {
      //   this.active = this.active - 1;
      // }
      // if (this.active >= 12) {
      //   this.active = this.active - 4;
      // }
      setLocalStorage({ getskill: this.skill });
    }
  },

  methods: {
    filname() {
      this.list = [];
      this.morelist = [];
      let ipt = this.$refs.inpt;
      ipt.blur();
      this.onLoad();
      this.onLoadMore();
    },
    //
    redirectTo(link) {
      // if (link == 3) {
      //   let wosl = this.$refs.wosl;
      //   let bcwosl = this.$refs.bcwosl;
      //   if (this.workbol) {
      //     wosl.classList.remove('work_cancel');
      //     wosl.className = 'work_selection';
      //     wosl.style.display = '';
      //     bcwosl.style.display = '';
      //     setTimeout(() => {
      //       wosl.style.transform = `translateY(${-87}%)`;
      //     }, 200);
      //     this.workbol = false;
      //     return;
      //   } else if (!this.workbol) {
      //     wosl.classList.remove('work_selection');
      //     wosl.className = 'work_cancel';
      //     wosl.style.transform = '';
      //     setTimeout(() => {
      //       wosl.style.display = 'none';
      //     }, 200);
      //     this.workbol = true;
      //     return;
      //   }
      // }
      this.$router.push({ path: link });
    },
    // tab按钮
    ontap(index, id) {
      this.active = id;
      this.skill = id;
      this.page = 0;
      this.morepage = 0;
      this.list = [];
      this.morelist = [];
      this.onLoad();
      this.onLoadMore();
    },
    // 获取地区
    initArea() {
      let area = this.$store.getters.getArea;
      if (area.code != null) {
        this.area_code = area.code;
        this.address = area.city;
      } else {
        this.area_code = '100000';
        this.address = '全国地区';
      }
    },
    getHasWkType(wktype_value) {
      for (let i in this.workType) {
        if (Number(wktype_value) === this.workType[i].value) {
          return this.workType[i].text;
        }
      }
    },
    initWkType() {
      dicItems({
        groupId: this.wkTypeId,
      })
        .then((res) => {
          let list = res.data.data.list;

          for (let i in list) {
            let opiton = {
              text: list[i].itemName,
              value: parseInt(list[i].itemValue),
            };
            this.workType.push(opiton);
          }
        })
        .catch(() => {});
    },
    getDate(item) {
      let time = '——';
      if (item.startDate != undefined && item.endDate != undefined) {
        let s1 = new Date(item.startDate.replace(/-/g, '/'));
        let s2 = new Date(item.endDate.replace(/-/g, '/'));
        var days = s2.getTime() - s1.getTime();
        time = parseInt(days / (1000 * 60 * 60 * 24));
      }
      return time;
    },
    publish(link) {
      if (this.statusy == 0) {
        //未认证
        Toast('请先验证手机号!');
        this.$router.push({ path: `/check` });
        return;
      } else {
        this.$router.push(link);
      }
    },
    itemClick(link) {
      this.$router.push({ path: link });
    },
    getSrc(item, id) {
      // 取余是指剩下小于除数的数被取下来，不是除完后取小数点后面的数
      // let image = this.bei[id % 6];

      let image = item.imgUrl;

      return image;
    },
    addConfirm(e) {
      if (e[0].code == '100000') {
        this.area_code = '';
        this.address = '全国地区';
      } else {
        this.area_code = e[1].code;
        this.address = e[1].name;
      }
      this.list = [];
      this.morelist = [];
      this.page = 0;
      this.morepage = 0;
      this.show = false;
      this.changeItem();
      this.onLoad();
      this.onLoadMore();
      this.$refs.area_item.toggle();
    },
    hideAreaItem() {
      this.$refs.area_item.toggle();
    },
    changeItem(e) {
      if (e == undefined) {
        this.list = [];
        return;
      }
      this.active = e;
      // if (this.active >= 7 && this.active <= 8) {
      //   this.active = this.active - 1;
      // }
      // if (this.active >= 12) {
      //   this.active = this.active - 4;
      // }
      this.skill = e;
      if (e != undefined) {
        setLocalStorage({ getskill: e });
      }
      this.page = 0;
      this.morepage = 0;
      this.list = [];
      this.morelist = [];
      this.onLoad();
      this.onLoadMore();
    },
    changeIte(e) {
      this.staff = e;
      this.page = 0;
      this.morepage = 0;
      this.list = [];
      this.morelist = [];
      this.onLoad();
      this.onLoadMore();
    },

    onLoad() {
      if (this.page != 0 && this.list.length < 10) {
        this.page = 0;
        this.list = [];
      }

      this.page++;
      listProject({
        page: this.page,
        limit: this.limit,
        filtername: this.filter_name,
        areaCode: this.area_code,
        skill: this.skill,
        staff: this.staff,
        projectId: -1,
        viewMore: 0,
        userId: -1,
        sort: 'update_time',
      })
        .then((res) => {
          res.data.data.list.forEach((item) => {
            //如果商品包含到期时间，则继续
            if (typeof item.excessTime != 'undefined') {
              //如果现在时间大于过期时间，则显示已结束图标
              if (new Date() > new Date(item.excessTime)) {
                item.finished = true;
              } else {
                item.finished = false;
              }
            } else {
              item.finished = false;
            }

            //如果商品已经下架，则显示结束
            if (item.status !== 3) {
              item.finished = true;
            }
          });
          this.list.push(...res.data.data.list);
          this.loading = false;
          this.finished = res.data.data.page >= res.data.data.pages;
        })
        .catch((e) => {
          this.page--;
          this.loading = false;
          this.finished = true;
        });
    },

    onLoadMore() {
      if (this.morepage != 0 && this.morelist.length < 10) {
        // this.morepage = 0;
        this.morelist = [];
      }

      this.morepage++;
      morelistProject({
        page: this.morepage,
        limit: 10,
        areaCode: this.area_code,
        filtername: '',
        skill: this.skill,
        staff: -1,
        viewMore: 1,
        projectId: -1,
        userId: -1,
        sort: 'update_time',
      }).then((res) => {
        res.data.data.list.forEach((item) => {
          //如果商品包含到期时间，则继续
          if (typeof item.excessTime != 'undefined') {
            //如果现在时间大于过期时间，则显示已结束图标
            if (new Date() > new Date(item.excessTime)) {
              item.finished = false;
            } else {
              item.finished = false;
            }
          } else {
            item.finished = false;
          }

          //如果商品已经下架，则显示结束
          if (item.status !== 3) {
            item.finished = true;
          }
          this.morelist.push(item);
        });
        this.loading = false;
        this.morefinished = res.data.data.page >= res.data.data.pages;
      });
    },
  },
  components: {
    [Icon.name]: Icon,
    [Search.name]: Search,
    [Row.name]: Row,
    [Col.name]: Col,
    [List.name]: List,
    [Popup.name]: Popup,
    [Area.name]: Area,
    [Tag.name]: Tag,
    [Divider.name]: Divider,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
  },
};
</script>

<style lang="scss" scoped>
.is-active {
  color: white;
  background-color: #fea100;
}
/deep/.divp {
  p {
    margin: 1px;
  }
}
.pubak {
  // background: #ededed;
  .tanspan {
    font-size: 11px;
  }
  // .valuespan {
  //   font-size: 0.5rem;
  // }
}
.work_selection {
  transition-duration: 0.6s;
  // transform: translateY(-87%);
}
.work_cancel {
  transition-duration: 0.2s;
  transform: translateY(2%);
}
.van-tag--large {
  font-size: 12px !important;
  padding: 2px 4px !important;
}
.getback {
  color: #018dff;
  background: #f0f7fa;
  .tanspan {
    // font-weight: bold;
    font-size: 11.2px;
  }
  // .valuespan {
  //   font-size: 0.52rem;
  // }
}
.getbackr {
  color: #fff;
  background: rgb(3, 151, 251);
  .tanspan {
    font-weight: bold;
    font-size: 0.81rem;
  }
  // .valuespan {
  //   font-size: 0.52rem;
  // }
}
.pubakr {
  // background: #ededed;
  .tanspan {
    font-size: 0.8rem;
  }
  // .valuespan {
  //   font-size: 0.5rem;
  // }
}
.navclas {
  display: flex;
  padding: 0 10px;
  padding-top: 11px;
  box-sizing: border-box;

  > a {
    border: 1px solid #1d5ae8;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /deep/ .van-dropdown-menu__title {
    color: black !important;
  }
  /deep/ .van-dropdown-menu__title::after {
    border-color: transparent transparent black black !important;
  }
  /deep/.van-dropdown-menu__bar {
    background-color: #2aa7ea00 !important;
  }
}

.container {
  .van-row {
    padding: 0px 15px;

    .van-row {
      padding: 0px;
    }
  }
}
/deep/ .van-picker__cancel,
/deep/ .van-picker__confirm {
  color: #ee3f00;
}
/deep/ .van-field__body {
  padding-right: 8px !important;
}
.van-search__content--round {
  border-radius: 0px !important;
}

.van-search__content {
  background: rgba(0, 0, 0, 0);
}

/deep/ .van-dropdown-menu {
  box-shadow: 0 0 0 0;

  .van-dropdown-menu__item {
    // background: rgb(233, 233, 233);
    // margin-left: 6px;
    height: 29px;
    border-radius: 25px;
  }
}

/deep/ .van-dropdown-menu__title {
  color: #fff !important;
}
.select_area /deep/ .van-picker__toolbar {
  width: 100%;
  position: absolute;
  bottom: -44px;
}

.select_area /deep/ .van-picker__columns {
  margin-bottom: 44px;
}

.cell-div {
  width: 100%;
}

.cell-div span {
  color: #bbbbbb;
}

.spanafter {
  position: relative;
  padding: 0 8px;
  line-height: 18px;
}

.spanafter::after {
  position: absolute;
  top: 50%;
  right: -1px;
  margin-top: -5px;
  border: 3px solid;
  border-color: transparent transparent currentColor currentColor;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  opacity: 0.8;
  content: '';
}

/deep/.van-dropdown-menu__item {
  padding: 0 3% 0 0;
}

.address {
  text-align: center;
  height: 36px;
  line-height: 36px;
  color: #323233;
  font-size: 15px;
}

.container {
  background-color: white;

  .van-row {
    padding: 0px 15px;

    .van-row {
      padding: 0px;
    }
  }
}

.van-divider {
  margin: 0px;
  // padding-top: 20px !important;
}

.corner-span {
  width: 40px;
  height: 20px;
  // background-color: #EE3F00;
  border: 1px solid #ee3f00;
  border-radius: 5px;
  font-size: 12px;
  padding: 2px 8px;
}

.van-search {
  padding: 0px;
  height: 24px !important;
}

.fincell {
  .title {
    width: 80%;
    margin: 2px 0 0 8px;
  }
}

.title {
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-line-clamp: 1;
  white-space: normal;
  overflow: hidden;
  color: #969799;
  font-size: 12px;
  font-weight: normal;
  margin-top: 0;
}

.publish {
  line-height: 40px;
  text-align: end;
}

.publish span {
  width: 60px;
  height: 30px;
  background-color: #ee3f00;
  border: 1px solid #ee3f00;
  border-radius: 4px;
  font-size: 14px;
  padding: 5px 7px;
  color: white;
}

.van-cell {
  padding: 0px;
  width: 80%;
}

.cell-span {
  color: #969799;
  font-size: 12px;
}

.menu-container {
  display: flex;

  .van-col {
    flex: 1 !important;
    padding: 0 0px;
  }
}

/deep/.van-dropdown-menu__bar {
  height: auto;
  box-shadow: 0 0 0 0;
  background-color: #31acee;
  border-radius: 25px;
  .van-dropdown-menu__title::after {
    border-color: transparent transparent #fff #fff;
  }
}
</style>
